<template>
  <view class="date">
    <text class="date-text">
      &emsp;选择入园时间&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2024.06
    </text>
  </view>


  <div class="hezi">
    <uni-card style="border-radius: 20rpx;">
      <div class="box" style="border-radius: 10rpx; width: 42px; height: 64px;"
           v-for="(item, index) in itemList"
           :key="index"
           :class="{ 'item': true, 'active': activeIndex === index }"
           @click="changeColor(index)"
      >
        {{ item }}
      </div>
    </uni-card>
  </div>


  <view class="date">
    <text class="date-text">
      &emsp;选择入园时段
    </text>
  </view>


  <view>
    <uni-card style="border-radius: 20rpx;">
      <div class="box1" style="border-radius: 10rpx; width: 160px; height: 27px;"
           v-for="(item, index2) in itemList2"
           :key="index2"
           :class="{ 'item': true, 'active': activeIndex2 === index2 }"
           @click="changeColor2(index2)"
      >
        {{ item }}
      </div>
    </uni-card>
  </view>


  <view>
    <button @click="enter" class="shiduanqueren"  style="color: white; background-color: #8DCB6D;">
      时段确认
    </button>
  </view>



</template>

<script>
export default {
  data() {
    return {
      itemList: ['周六 01', '周日 02', '周一 03', '周二 04', '周三 05', '周四 06', '周五 07','周六 01', '周日 02', '周一 03', '周二 04', '周三 05', '周四 06', '周五 07'],
      activeIndex: null,
      itemList2: ['09:00-11:00 ','11:00-13:30 ','13:30-16:00 '],
	  activeIndex2: null,
	  
    };
  },
  methods: {
    changeColor(index) {
      this.activeIndex = index;
    },
	changeColor2(index2) {
		this.activeIndex2 = index2;
	}
  }
};
</script>

<script setup>
	let enter = function() {
			uni.navigateTo({
				url: '/pages/leave/tuantiyuyue'
			})
		}
</script>

<style scoped>
	.date{
		height: 90rpx;
		margin-top: 9px;
	}
	.date-text{
		font-family: PingFangSC-Medium;
		font-weight: 550;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.box{
		display: inline-flex;
		justify-content: flex-end;
		margin-left: 4px;
		margin-top: 9px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.box1{
		display: inline-flex;
		justify-content: flex-end;
		margin-left: 4px;
		margin-top: 9px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 14px;
		color: #6B6B6B;
		letter-spacing: 0;
	}
	.item {
		background-color: #F5F5F5;
	}
	.item.active {
		background-color: #8DCB6D;
	}
	.shiduanqueren{
		font-family: PingFangSC;
		font-weight: bold;
		font-size: 15px;
		color: black;
		letter-spacing: 0;
		width: 700rpx;
		height: 90rpx;
		margin-top: 450rpx;
		justify-content: center;
		border-radius: 160px;
	}
	.yuyue1{
		margin-top: 50px;
		margin-bottom: 15px;
		height: 100px;
	}
</style>